/**
 * 定义动画
 */
@keyframes fadeIn{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes fadeOut{
	from{opacity: 1;}
	to{opacity: 0;}
}
@keyframes hideToLeft{
	from{transform: translate3d(0, 0, 0); opacity: 1;}
	to{transform: translate3d(-50%, 0, 0); opacity: 1;}
}
@keyframes showFromRight{
	from{transform: translate3d(100%, 0, 0); opacity: 1;}
	to{transform: translate3d(0, 0, 0); opacity: 1;}
}
@keyframes hideToRight{
	from{transform: translate3d(0, 0, 0); opacity: 1;}
	to{transform: translate3d(100%, 0, 0); opacity: 1;}
}
@keyframes showFromLeft{
	from{transform: translate3d(-50%, 0, 0); opacity: 1;}
	to{transform: translate3d(0, 0, 0); opacity: 1;}
}

/**
 * 视图容器水平居中
 */
[data-view-container]{
	position: relative;
	margin: 0 auto;
}
/**
 * 所有视图重叠在一起，默认都不显示
 */
*[data-view=true] {
	opacity: 0;
	z-index: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #F3F3F3;
	box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
}
/**
 * 视图隐藏时要呈现的半透明黑色蒙层。默认不显示
 */
*[data-view=true]:before{
	opacity: 0;
	content: "";
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
}
/**
 * 活动视图可见
 */
*[data-view=true].active {
	opacity: 1;
	z-index: 1;
}

/**
 * 有条件地引用动画
 */


/* 视图含有hideToLeft样式类时播放hideToLeft动画 */
.view.hideToLeft{
	animation: hideToLeft 0.6s ease-out;
}
/* 视图向左隐藏时逐渐显示半透明黑色蒙层 */
.view.hideToLeft:before{
	display: block;
	animation: fadeIn 0.6s linear;
}

/* 视图含有showFromLeft样式类时播放showFromLeft动画 */
.view.showFromLeft{
	animation: showFromLeft 0.6s ease-out;
}
/* 视图取消隐藏时逐渐关闭半透明黑色蒙层 */
.view.showFromLeft:before{
	display: block;
	animation: fadeOut 0.6s linear;
}

/**
 * 视图含有hideToRight样式类时播放hideToRight动画。
 * z-index要比活动视图的1更高，从而使其不会被活动视图覆盖
 */
.view.hideToRight{
	z-index: 2;
	animation: hideToRight 0.6s ease-out;
}

/* 视图含有showFromRightn样式类时播放showFromRightn动画 */
.view.showFromRight{
	animation: showFromRight 0.6s ease-out;
}
